<template>
  <div class="test-errors">
    <!-- 缺少key的v-for -->
    <div v-for="item in items">
      {{ item }}
    </div>

    <!-- 错误的v-model用法 -->
    <input v-model.number="test">

    <!-- 直接修改props -->
    <child-component :value="value" @click="value = 'new value'" />

    <!-- 计算属性中的副作用 -->
    <div>{{ computedWithSideEffect }}</div>

    <!-- 静态内联样式 -->
    <div style="color: red;">静态样式</div>

    <!-- 不安全的target="_blank" -->
    <a href="https://example.com" target="_blank">链接</a>
  </div>
</template>

<script>
export default {
  name: 'test-errors',
  props: {
    value: String
  },
  data() {
    return {
      items: [1, 2, 3],
      test: '123'
    }
  },
  computed: {
    computedWithSideEffect() {
      this.test = 'changed'  // 副作用
      return this.test
    }
  },
  methods: {
    unusedMethod() {  // 未使用的方法
      console.log('test')  // 使用console
    }
  }
}
</script>

<style>
.test-errors {
  color: blue
}  /* 缺少分号 */
</style>